<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         table,table tr th, table tr td { border:1px solid #0094ff; }
    </style>
</head>
<body>
    <div>
        <input type="text" id="username" />
        <input type="radio" id="sexOne"  name="sex" value="男"/>男
        <input type="radio" id="sexTwo" checked name="sex" value="女"/>女
        <input type="text" id="age" />
        <button id="add">添加</button>
    </div>
    <br/>
    <table cellspacing="0" border="1" width="600px" >
        <tr>
            <td>姓名</td>
            <td>性别</td>
            <td>年龄</td>
            <td>操作</td>
        </tr>
    </table>
    <script>
        //页面上输入用户的姓名、性别、年龄 确认后 列表的方式显示添加的数据
        //提示：取出input对应的dom对象后可以通过value属性获取到input中的内容
        
        document.querySelector('#add').onclick = function(){
            // 获取输入的内容
            var username = document.querySelector('#username').value;
            var sex = document.querySelector('input[name="sex"]:checked').value
            var age = document.querySelector('#age').value;
            // 创建tr标签
            var trDom =  document.createElement('tr');
            trDom.innerHTML = `
                <td>${username}</td>
                <td>${sex}</td>
                <td>${age}</td>
                <td><button class="delete" onclick="deleteTr(this)">删除</button></td>
                `;
            document.querySelector('tbody').appendChild(trDom);
        }
        function deleteTr(obj){
            // 获取到当前点击的dom对象对应的父级tr对象
            // parentElement表示获取到上一级的dom对象
            // 传递的参数obj 是当前的dom对象
            // console.log(obj.parentElement.parentElement)
            var trDom = obj.parentElement.parentElement;
            document.querySelector('tbody').removeChild(trDom);
        }

        // 未来元素 不能使用动态绑定 
        // document.querySelectorAll('.delete').forEach(function(dom){
        //     dom.onclick = function(){
        //         console.log('delete');
        //     }
        // })

        
    </script>
</body>
</html>